feat(calm-hub-ui): Visualise patterns#2169
Merged
YoofiTT96 merged 27 commits intofinos:mainfrom Mar 4, 2026
Merged
Conversation
Member
Author
Screen.Recording.2026-02-26.at.8.03.47.PM.mov |
YoofiTT96
requested review from
aamanrebello,
aidanm3341,
markscott-ms and
rocketstack-matt
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds comprehensive pattern visualization support to the CALM Hub UI, enabling users to visualize CALM patterns (JSON Schema) as interactive ReactFlow graphs alongside the existing architecture visualization. The implementation extracts nodes from pattern schema const values and renders oneOf/anyOf choices as visual decision groups. Additionally, a unified search and filter feature is introduced for both architecture and pattern graphs, allowing users to search nodes by name, ID, or type, with a dropdown filter for node types. Non-matching elements are dimmed to aid navigation in complex diagrams.
Changes:
- Pattern visualization: New components (PatternGraph, PatternVisualizer, DecisionGroupNode, PatternDrawer, PatternSection) parse JSON Schema patterns into interactive graphs with decision groups for alternative choices
- Search & filter: Unified SearchBar component with text search and type filtering added to both ArchitectureGraph and PatternGraph, using shared searchUtils for consistent behavior
- Contract updates: NodeData and EdgeData interfaces updated to use CALM schema field names ('unique-id', 'node-type', 'relationship-type') for consistency between architectures and patterns
Reviewed changes
Copilot reviewed 23 out of 23 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| calm-hub-ui/src/visualizer/contracts/contracts.ts | Updated NodeData and EdgeData to use CALM schema field names ('unique-id', 'node-type', 'relationship-type') |
| calm-hub-ui/src/visualizer/components/sidebar/Sidebar.tsx | Updated type guards to check for new field names |
| calm-hub-ui/src/visualizer/components/sidebar/Sidebar.test.tsx | Updated test mocks to use new field names |
| calm-hub-ui/src/visualizer/components/reactflow/utils/searchUtils.ts | New utility functions for node/edge search and filtering (supports both architecture and pattern nodes) |
| calm-hub-ui/src/visualizer/components/reactflow/utils/searchUtils.test.ts | Comprehensive test coverage for search utilities |
| calm-hub-ui/src/visualizer/components/reactflow/utils/patternTransformer.ts | Core pattern parser: extracts nodes, relationships, controls, and interfaces from JSON Schema, handles oneOf/anyOf decision groups |
| calm-hub-ui/src/visualizer/components/reactflow/utils/patternTransformer.test.ts | Extensive test coverage for pattern transformation including decision groups, relationships, and controls |
| calm-hub-ui/src/visualizer/components/reactflow/utils/patternClickHandlers.ts | Converts ReactFlow node/edge data to sidebar-compatible format by stripping display artifacts |
| calm-hub-ui/src/visualizer/components/reactflow/utils/layoutUtils.ts | Extracted calculateGroupBounds function for reuse in both ArchitectureGraph and PatternGraph |
| calm-hub-ui/src/visualizer/components/reactflow/theme.ts | Added decision colors for oneOf/anyOf pattern visualization |
| calm-hub-ui/src/visualizer/components/reactflow/SearchBar.tsx | Reusable search bar component with text input, clear button, and type filter dropdown |
| calm-hub-ui/src/visualizer/components/reactflow/SearchBar.test.tsx | Test coverage for SearchBar component |
| calm-hub-ui/src/visualizer/components/reactflow/PatternVisualizer.tsx | Top-level pattern visualizer component with background click handling |
| calm-hub-ui/src/visualizer/components/reactflow/PatternGraph.tsx | ReactFlow graph for patterns with search/filter, node dragging, and group bound recalculation |
| calm-hub-ui/src/visualizer/components/reactflow/DecisionGroupNode.tsx | Custom node for displaying oneOf/anyOf decision groups with styled borders and labels |
| calm-hub-ui/src/visualizer/components/reactflow/ArchitectureGraph.tsx | Added search/filter integration and extracted calculateGroupBounds to layoutUtils |
| calm-hub-ui/src/visualizer/components/drawer/PatternDrawer.tsx | Drawer component specifically for pattern visualization with sidebar integration |
| calm-hub-ui/src/visualizer/components/drawer/Drawer.tsx | Updated to detect and handle both architecture and pattern data with pattern-specific click handlers |
| calm-hub-ui/src/theme/colors.ts | Added decision color palette (yellow for oneOf, sky blue for anyOf) |
| calm-hub-ui/src/hub/components/pattern-section/PatternSection.tsx | Hub section for patterns with diagram/JSON tabs |
| calm-hub-ui/src/hub/Hub.tsx | Added PatternSection routing for calmType === 'Patterns' |
| calm-hub-ui/src/hub/Hub.test.tsx | Updated tests to expect PatternSection instead of generic JSON renderer |
| calm-hub-ui/README.md | Added future features roadmap section |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
calm-hub-ui/src/visualizer/components/reactflow/ArchitectureGraph.tsx
Outdated
Show resolved
Hide resolved
calm-hub-ui/src/visualizer/components/reactflow/PatternGraph.tsx
Outdated
Show resolved
Hide resolved
calm-hub-ui/src/visualizer/components/reactflow/utils/patternTransformer.ts
Outdated
Show resolved
Hide resolved
rocketstack-matt
requested changes
Feb 26, 2026
Member
rocketstack-matt
left a comment
rocketstack-matt
left a comment
There was a problem hiding this comment.
We're missing tests for:
- PatternDrawer
- PatternVisualizer
- DecisionGroupNode
- PatternSection
calm-hub-ui/src/visualizer/components/reactflow/ArchitectureGraph.tsx
Outdated
Show resolved
Hide resolved
Member
Author
DecisionGroupNode, PatternVisualizer are pure presentation elements covered in other tests |
Remove boilerplate and improve UI README instructions with description of features and preview of functionality
Update video name
Update features
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
rocketstack-matt
approved these changes
Mar 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Type of Change
Affected Components
cli/)shared/)calm-widgets/)calm-hub/)calm-hub-ui/)docs/)calm-plugins/vscode/)Commit Message Format ✅
Testing
Checklist